<template>
  <div class="home">
    <div class="body">
      <div class="content">
        <vUsertop></vUsertop>
        <router-view></router-view>
      </div>
      <div class="sider">
        <vUserside></vUserside>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import vUsertop from "../user/Usertop";
import vUserside from "../user/Userside";
import { showUser, showMySelf } from "../../api/showUser";
import VueEvent from "../../utils/event";

export default defineComponent({
  setup() {
    if (sessionStorage.getItem("username") != "") {
      showUser({
        url: "/showUsers/showUser",
        username: sessionStorage.getItem("username"),
        success: (res) => {
          // console.log(res.data.likes);
          sessionStorage.setItem("userID", res.data.uid);
          VueEvent.emit("userTop", {
            uid: res.data.uid,
            name: res.data.uname,
            follows: res.data.follows,
            fans: res.data.fans,
            articles: res.data.article_num,
            numOfLikes: res.data.numOfLikes,
            imgUrl: "http://localhost:3000/" + res.data.img_head,
          });
          VueEvent.emit("userSide", {
            uinfor: res.data.uinfor,
            arrangeList: res.data.arrangeList,
            collections: res.data.collections,
          });
        },
        err: (err) => {
          console.log(err);
        },
      });
    } else {
      showMySelf({
        url: "/showUsers/showMySelf",
        success: (res) => {
          // console.log(res.data);
          sessionStorage.setItem("userID", res.data.uid);
          VueEvent.emit("userTop", {
            uid: res.data.uid,
            name: res.data.uname,
            follows: res.data.follows,
            fans: res.data.fans,
            articles: res.data.article_num,
            numOfLikes: res.data.numOfLikes,
            imgUrl: "http://localhost:3000/" + res.data.img_head,
          });
          VueEvent.emit("userSide", {
            uinfor: res.data.uinfor,
            arrangeList: res.data.arrangeList,
            collections: res.data.collections,
          });
        },
        err: (err) => {
          console.log(err);
        },
      });
    }

    return {};
  },
  components: {
    vUsertop,
    vUserside,
  },
});
</script>

<style scoped>
.home {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #f1fffd;
}
.body {
  height: auto;
  min-height: 700px;
  width: 66%;
  margin: 0 17% 0 17%;
  padding-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.content {
  height: auto;
  width: 70%;
  padding: 20px 20px 0 20px;
  margin: 0;
  min-width: 530px;
  background: #edf9ff;
}

.sider {
  height: auto;
  width: 30%;
  padding: 20px 20px 0 0;
  margin: 0 0 0 10px;
  min-width: 200px;
  background: #edf9ff;
}
</style>